<script setup lang="ts">
import { ref, reactive } from "vue";
import { apiBaseCol } from "assets/js/constant.js";
import textFiles from "./components/textFiles.vue";
const address = ref("");
const formVal = reactive({
  remark: [{ required: true, message: "请输入备注！" }],
});

const dataSource = reactive([
  {
    key: "1",
    name: "label",
    param: "string",
    desc: "标题",
  },
  {
    key: "3",
    name: "isRequire",
    param: "boolean",
    desc: "是否必填",
  },
  {
    name: "v-model",
    param: "string",
    desc: "双向绑定值",
  },
  {
    name: "placeholder",
    param: "string",
    desc: "文本框提示文字",
  },
  {
    name: "message",
    param: "string",
    desc: "必填验证提示文字",
  },
  {
    name: "name",
    param: "string",
    desc: "表单提交字段值",
  },
  {
    name: "showWordLimit",
    param: "boolean",
    desc: "显示字数统计",
  },
  {
    name: "maxlength",
    param: "string",
    desc: "输入的最大字符数",
  },
]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">多用于表单提交等，文本域的输入</div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>

        <pre class="public-content-code">
        <code
          class="language-css"
        >
    import { HxqTextArea } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>
      <div class="public-flex-box">
        <pre class="public-content-code">
        <code
          class="language-css"
        >
  const address = ref("");
  const formVal = reactive({
    remark: [{ required: true, message: "请输入备注！" }],
  });
        </code></pre>
        <pre class="public-content-code">
        <code
          class="language-css"
        >
  &lt;hxq-text-area
    :isRequire="formVal.remark[0].required"
    label="备注"
    :message="formVal.remark[0].message"
    name="remark"
    :placeholder="'请输入备注'"
    v-model="address"
  >
        &lt;/hxq-text-area>
        </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <textFiles></textFiles>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
</style>
